<template>
  <div>
    <el-dropdown @command="handleCommand">
      <span class="el-dropdown-link">
        <img style="width: 25px" src="@/static/img/index/size.svg" />
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item
            v-for="(item, index) in downMenu"
            :key="item.size"
            :disabled="index == disabledIndex"
            :command="index"
          >
            <el-icon>
              <CaretRight />
            </el-icon>
            {{ $t(item.title) }}
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script>
import { CaretRight } from "@element-plus/icons-vue";
export default {
  data() {
    return {
      downMenu: [
        { title: "sizechang.large", size: "large" },
        { title: "sizechang.defaults", size: "default" },
        { title: "sizechang.smalls", size: "small" },
      ],
      disabledIndex: 1, //默认
    };
  },
  components: {
    CaretRight,
  },
  methods: {
    handleCommand(index) {
      this.disabledIndex = index;
      localStorage.setItem("size", this.downMenu[index].size);
      this.$emit("changeSize"); //事件触发父组件
    },
  },
  created() {
    // 获取储存选中的size的下标
    const index = this.downMenu.findIndex(
      (item) => item.size == localStorage.getItem("size")
    );
    if (index != -1) {
      this.disabledIndex = index;
    }
  },
};
</script>

<style></style>
